<template>
	<view class="content">
    <view class="search">
      <uni-search-bar placeholder="请输入搜索关键词" @confirm="search" cancelButton="none" radius="28">
        <template v-slot:searchIcon>
          <text class="iconfont icon-fangdajing" style="font-size: 36rpx;"></text>
        </template>
      </uni-search-bar>
      <view class="u-p-l-32 u-p-r-32">
        <view class="u-p-t-32 u-p-b-32" @click="dropdownShow = true">
          {{TypeTitle}}
        <u-icon name="arrow-down" size="24" style="margin-left: 10rpx;"></u-icon>
        </view>
      </view>
    </view>
    <view style="height: 212rpx;"></view>  
    <view class="article" >
      <view class="article-item" v-for="(item,index) in 5" :key="index" @click="CircleNewDetail">
        <view class="article-item__container">
          <view class="article-item__header">
            <view class="article-item__icon">
              <image src="/static/logo.png" mode="scaleToFill" class="article-item__icon-img"></image>
            </view>
          </view>
          <view class="article-item__content article-item__content--center">
            <text class="article-item__content-title">挖掘机</text>
            <text class="article-item__content-note">9分钟前·22浏览</text>
          </view>
          <view class="article-item__extra">
            <view class="article-item__extra-j">
              知识科普
              <u-icon name="arrow-right" size="28"></u-icon>
            </view>
          </view>
        </view>
        <view class="article-item_text">分享一个PPT制作神器</view>
        <view class="article-item_img-text">
          <image src="/static/image/main.png" mode="scaleToFill" class="img"></image>
          <view class="opaticy">
            <text>PPT的图片太丑啦!这四个方法完美解决。</text>
          </view>
        </view>
        <view class="article-item_up">
          <view class="u-flex u-m-r-12">
            <iconfont name="icon-pinglun" class="article-item_up-icon"></iconfont>
            <text class="u-m-l-4">9999</text>
          </view>
          <view class="u-flex">
            <iconfont name="icon-jiabahuo" class="article-item_up-icon"></iconfont>
            <text class="u-m-l-4">9999</text>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 100rpx;"></view>  
    
    <u-popup v-model="dropdownShow" mode="top">
      <view class="slot-content">
        <view @click="dropdownType(1,'我的圈子')"><text>我的圈子</text></view>
      	<view class="item-box">
      		<view class="item" :class="[item.active ? 'active' : '']" @tap="tagClick1(index)" v-for="(item, index) in look1" :key="index">
      			{{item.label}}
      		</view>
      	</view>
      </view>
      <view class="slot-content">
        <view @click="dropdownType(2,'砖家达人')"><text>砖家达人</text></view>
      	<view class="item-box">
      		<view class="item" :class="[item.active ? 'active' : '']" @tap="tagClick2(index)" v-for="(item, index) in look2" :key="index">
      			{{item.label}}
      		</view>
      	</view>
      </view>
      <view class="slot-content">
        <view @click="dropdownType(3,'官方优选')"><text>官方优选</text></view>
      	<view class="item-box">
      		<view class="item" :class="[item.active ? 'active' : '']" @tap="tagClick3(index)" v-for="(item, index) in look3" :key="index">
      			{{item.label}}
      		</view>
      	</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
	export default {
		data() {
			return {
        look1: [{
        		label: '二刺螈文化交流',
        		active: true,
        	},
        	{
        		label: '军神爱好者',
        		active: false,
        	},
        	{
        		label: '爱车一族',
        		active: false,
        	},
        ],
        look2: [{
        		label: '生活干货',
        		active: true,
        	},
        	{
        		label: '知识科普',
        		active: false,
        	},
        	{
        		label: '游戏攻略',
        		active: false,
        	},
        	{
        		label: '好物分享',
        		active: false,
        	},
        ],
        look3: [{
        		label: '热门神贴',
        		active: true,
        	},
        	{
        		label: '精彩分享',
        		active: false,
        	},
        	{
        		label: '值得一看',
        		active: false,
        	},
        	{
        		label: '消遣娱乐',
        		active: false,
        	},
        ],
        dropdownShow:false,
        TypeTitle:'想看什么？',
      }
		},
		onLoad(options) {
      this.TypeTitle = options.Name
		},
		methods: {
      tagClick1(index) {
      	this.look1[index].active = !this.look1[index].active;
      },
      tagClick2(index) {
      	this.look2[index].active = !this.look2[index].active;
      },
      tagClick3(index) {
      	this.look3[index].active = !this.look3[index].active;
      },
      CircleNewDetail(){
        uni.navigateTo({
        	url: '/pages/Circle/CircleNewDetail/CircleNewDetail2?Name=分享一个PPT制作神器'
        });
      },
      dropdownType(type,text){
        this.dropdownShow = false
        // this.TypeTitle = text
        uni.navigateTo({
        	url: '/pages/Circle/CircleNew/CircleNew'+type+'?Name='+text
        });
      },
		}
	}
</script>

<style lang="scss" scoped>
  .img{
    width: 100%;
    height: 100%;
  }
	.content {
    .home-img{
      width: 100%;
      height: 100%;
    }
    .search{
      background-color: #ffffff;
      width: 100%;
      position: fixed;
      z-index: 1;
    }
    .article{
      padding:32rpx;
      .article-item{
        position: relative;
        background-color: #fff;
        cursor: pointer;
        border-radius: 28rpx;
        margin-bottom: 32rpx;
        .article-item__container{
          position: relative;
          display: flex;
          flex-direction: row;
          flex: 1;
          overflow: hidden;
          padding: 32rpx 0 0 32rpx;
          .article-item__header {
            display: flex;
            flex-direction: row;
            align-items: center;
            .article-item__icon{
              margin-right: 18rpx;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              position: relative;
              .article-item__icon-img{
                display: block;
                height: 80rpx;
                width: 80rpx;
                margin-right: 20rpx;
                border-radius: 50%;
                overflow: hidden;
              }
              .scroll-circle-img{
                width: 32rpx;
                height: 32rpx;
                border-radius: 50%;
                background-color: #fed500;
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                bottom: 0;
                right: 16rpx;
                .scroll-circle-img__icon{
                  font-size: 24rpx;
                }
              }
            }
          }
          .article-item__content{
            display: flex;
            padding-right: 16rpx;
            flex: 1;
            color: #3b4144;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            .article-item__content-title{
              font-size: 28rpx;
              color: #3b4144;
              overflow: hidden;
            }
            .article-item__content-note{
              margin-top: 8rpx;
              font-size: 24rpx;
              overflow: hidden;
            }
          }
          .article-item__content--center{
            justify-content: center;
          }
          .article-item__extra{
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            .article-item__extra-j{
              background-color: #fed500;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 12rpx 8rpx;
            }
          }
        }
        .article-item_text{
          padding: 32rpx;
        }
        .article-item_img-grid{
          padding: 0 32rpx 0 32rpx;
        }
        .article-item_img-text{
          width: 100%;
          height: 264rpx;
          position: relative;
          .opaticy{
            width: 100%;
            height: 56rpx;
            line-height: 56rpx;
            background-color: rgba(0,0,0,0.5);
            position: absolute;
            bottom: 0px;
            color: #ffffff;
            padding: 0 24rpx;
          }
        }
        .article-item_up{
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding: 32rpx 32rpx 32rpx 0;
          .article-item_up-icon{
            font-size: 46rpx;
          }
        }
      }
    }
	}
</style>
